/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 微信管理，数据中心
 */
import React, { useState, useCallback, useEffect } from "react";
import { connect } from "dva";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import { Row, Col, Icon, Divider } from "antd";
import StandardTab from "@/components/StandardTab";
import HelpAndService from "@/components/HelpAndService";
import { useDebounceFn } from "@umijs/hooks";
import DataTable from "./DataTable";
import styles from "../style.less";
import QrCodeScanPage from "../components/QrCodeScanPage";

const DataCenter = props => {
  const { dispatch, platformList, fansData, hasBind } = props;

  const [activeKey, setActiveKey] = useState("operator");
  const [countDown, setCountDown] = useState(59);

  const { run: startCountDown } = useDebounceFn(() => {
    setCountDown(0);
    dispatch({
      type: "dataCenter/getFansData",
    }).then(() => {
      setCountDown(59);
    });
  }, 500);

  useEffect(
    () => {
      if (hasBind) {
        dispatch({
          type: "dataCenter/getFansData",
        });
        dispatch({
          type: "platform/isCityLeague",
        });
      }
    },
    [hasBind, dispatch]
  );

  useEffect(
    () => {
      const timeOut = setTimeout(() => {
        if (countDown == 0 && hasBind) {
          setCountDown(59);
          startCountDown();
        } else {
          setCountDown(c => c - 1);
        }
      }, 1000);

      return () => {
        clearTimeout(timeOut);
      };
    },
    [countDown, hasBind, startCountDown]
  );

  const handleTabChange = useCallback(_activeKey => {
    setActiveKey(_activeKey);
  }, []);

  return (
    <PageHeaderLayout
      content={
        hasBind ? (
          <div>
            <Row type="flex" justify="space-between" align="middle">
              <Col className={styles.overview}>
                <Row gutter={[10, 10]}>
                  <Col>粉丝数据总览</Col>
                  <Col>
                    <span>
                      定制公众号：
                      <span className="title">
                        {(platformList.weixin && platformList.weixin.platformName) || "-"}
                      </span>
                    </span>
                    <span>
                      定制小程序：
                      <span className="title">
                        {(platformList.weixin_mini && platformList.weixin_mini.platformName) || "-"}
                      </span>
                    </span>
                    <span>粉丝数据</span>
                  </Col>
                </Row>
              </Col>
              <Col className={styles.refresh} onClick={startCountDown}>
                数据刷新倒计时
                {countDown == 0 ? (
                  <Icon type="redo" spin />
                ) : (
                  <span style={{ marginLeft: 10 }}>{countDown}</span>
                )}
              </Col>
            </Row>
            <Divider />
            <Row className={styles.dashboard} type="flex" gutter={[40, 0]}>
              <Col>
                <Row>
                  <Col>公众号本月粉丝</Col>
                  <Col>{fansData.weixin ? fansData.weixin.monthCount : "-"}</Col>
                </Row>
              </Col>
              <Col>
                <Row>
                  <Col>公众号累计粉丝</Col>
                  <Col>{fansData.weixin ? fansData.weixin.allCount : "-"}</Col>
                </Row>
              </Col>
              <Col>
                <Row>
                  <Col>小程序本月粉丝</Col>
                  <Col>{fansData.weixin_mini ? fansData.weixin_mini.monthCount : "-"}</Col>
                </Row>
              </Col>
              <Col>
                <Row>
                  <Col>小程序累计粉丝</Col>
                  <Col>{fansData.weixin_mini ? fansData.weixin_mini.monthCount : "-"}</Col>
                </Row>
              </Col>
            </Row>
          </div>
        ) : (
          <h3>定制公众号/小程序的客户请使用微信扫码后使用</h3>
        )
      }
    >
      <QrCodeScanPage>
        <div className={styles.main}>
          <div>
            <StandardTab
              name="dataCenter"
              activeKey={activeKey}
              onChange={handleTabChange}
              tabBarExtraContent={<HelpAndService />}
              panes={[
                {
                  tab: "业务员",
                  key: "operator",
                  component: <DataTable key="operator" activeKey="operator" />,
                },
                {
                  tab: "快宝驿站",
                  key: "station",
                  component: <DataTable key="station" activeKey="station" />,
                },
              ]}
            />
          </div>
        </div>
      </QrCodeScanPage>
    </PageHeaderLayout>
  );
};
export default connect(({ platform, dataCenter }) => ({
  platformList: platform.platformList,
  fansData: dataCenter.fansData,
  hasBind: platform.hasBind,
}))(DataCenter);
